<template>
  <div class="performance-page">
    <!-- 标题区 -->
    <header class="page-header">
      <h1>前端性能优化核心面试题</h1>
      <p class="page-subtitle">深入解析性能优化关键指标与落地实践方案</p>
    </header>

    <!-- 内容容器 -->
    <div class="content-container">
      <!-- 左侧导航 -->
      <nav class="category-nav">
        <div 
          v-for="(item, index) in categories"
          :key="index"
          class="nav-item"
          :class="{ active: activeIndex === index }"
          @click="activeIndex = index"
        >
          <span class="item-order">#{{ index + 1 }}</span>
          {{ item.title }}
        </div>
      </nav>

      <!-- 右侧内容 -->
      <main class="content-main">
        <!-- 当前分类内容 -->
        <article class="category-content">
          <h2 class="content-title">{{ currentCategory.title }}</h2>
          
          <!-- 知识点内容 -->
          <section 
            v-for="(section, idx) in currentCategory.sections" 
            :key="idx"
            class="content-section"
          >
            <h3 class="section-title">{{ section.title }}</h3>
            <div class="section-body">
              <!-- 代码示例 -->
              <pre v-if="section.code" class="code-block"><code>{{ section.code }}</code></pre>
              <!-- 普通段落 -->
              <template v-for="(text, i) in section.texts" :key="i">
                <p class="paragraph">{{ text }}</p>
              </template>
              <!-- 注意事项 -->
              <div v-if="section.notes" class="notes-box">
                <strong>📌 注意事项：</strong>
                <ul>
                  <li v-for="(note, n) in section.notes" :key="n">{{ note }}</li>
                </ul>
              </div>
            </div>
          </section>
        </article>
      </main>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, computed } from 'vue';

interface Category {
  title: string;
  sections: Section[];
}

interface Section {
  title: string;
  texts?: string[];
  code?: string;
  notes?: string[];
}

const categories: Category[] = [
  {
    title: "关键性能指标",
    sections: [
      {
        title: "核心Web指标 (Core Web Vitals)",
        texts: [
          "LCP (Largest Contentful Paint): 测量加载性能，良好值应小于2.5秒",
          "FID (First Input Delay): 测量交互性，应小于100毫秒",
          "CLS (Cumulative Layout Shift): 测量视觉稳定性，应小于0.1"
        ],
        code: `// 使用web-vitals库测量
import {getCLS, getFID, getLCP} from 'web-vitals';

getCLS(console.log);
getFID(console.log);
getLCP(console.log);`
      }
    ]
  },
  {
    title: "加载性能优化",
    sections: [
      {
        title: "资源加载策略",
        texts: [
          "Preload关键资源: <link rel='preload' href='critical.css' as='style'>",
          "使用资源提示: dns-prefetch, preconnect, prefetch, prerender",
          "代码分割与动态导入: 利用Webpack的splitChunks或import()语法"
        ],
        code: `// 动态导入示例
const module = await import('./heavyModule.js');`
      }
    ]
  }
];

const activeIndex = ref(0);
const currentCategory = computed(() => categories[activeIndex.value]);
</script>

<style scoped lang="scss">
.performance-page {
  margin: 0 auto;
  padding: 2rem 1rem;
}

.page-header {
  text-align: center;
  margin-bottom: 3rem;
  
  h1 {
    font-size: 2.5rem;
    color: #2c3e50;
    margin-bottom: 0.5rem;
  }
  
  .page-subtitle {
    color: #7f8c8d;
    font-size: 1.1rem;
  }
}

.content-container {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 2rem;
}

.category-nav {
  border-right: 1px solid #eaecef;
  padding-right: 1rem;
  
  .nav-item {
    padding: 0.8rem 1rem;
    margin: 0.5rem 0;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    
    &:hover {
      background: #f8f9fa;
    }
    
    &.active {
      background: #3498db;
      color: white;
      font-weight: 500;
      
      .item-order {
        color: rgba(255,255,255,0.8);
      }
    }
    
    .item-order {
      color: #95a5a6;
      margin-right: 0.8rem;
      font-size: 0.9em;
    }
  }
}

.content-main {
  padding: 0 1rem;
  
  .content-title {
    font-size: 2rem;
    color: #2c3e50;
    margin-bottom: 1.5rem;
  }
}

.content-section {
  margin-bottom: 2rem;
  
  .section-title {
    font-size: 1.4rem;
    color: #34495e;
    margin: 1.5rem 0 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid #eee;
  }
}

.code-block {
  background: #282c34;
  color: #abb2bf;
  padding: 1rem;
  border-radius: 6px;
  overflow-x: auto;
  margin: 1rem 0;
  font-family: 'Fira Code', monospace;
}

.notes-box {
  background: #fffbe6;
  border-left: 4px solid #ffe58f;
  padding: 1rem;
  margin: 1.5rem 0;
  border-radius: 4px;
  
  ul {
    margin: 0.5rem 0 0 1.5rem;
  }
}

@media (max-width: 768px) {
  .content-container {
    grid-template-columns: 1fr;
  }
  
  .category-nav {
    border-right: none;
    border-bottom: 1px solid #eee;
    padding-bottom: 1rem;
  }
}
</style>